/*
  学习目标：props的基本使用
  步骤：
     1. 传数据
     2. 接收数据
      2.1 函数式组件
      2.2 class组件
*/
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        {/*  1. 传数据 */}
        <Hello name="zs" age={18}></Hello>
        <Child name="ls" age={20}></Child>
        {/* 💥 可以不传任意属性, 此时props为空对象 */}
        <Hello name="zs" age={18}></Hello>
      </div>
    );
  }
}
// 2.1 函数式组件通过形参接收props对象
// 👍 解构props
function Hello({ name, age }) {
  return (
    <h1>
      hello 77 - {name} - {age}
    </h1>
  );
}

// 2.2 类组件通过this.props接收
class Child extends React.Component {
  render() {
    const { name } = this.props;

    return <div>Child - {name}</div>;
  }
}

// props是对象, 指标签身上的属性组成对象
// 1. 传数据
// 2. 函数式组件, 通过形参接收props对象
// 3. 类组件, 通过this.props接收
